<template>
<transition name="fade">
  <div class="box">
    <div class="mine-person">
      <div class="mine-son1">
      </div>
      <div class="mine-son2">
        <ul>
          <li>我的</li>
          <li><img src="./../../assets/baike2.jpg"/></li>
          <li>我有一只猫c</li>
          <li>生活达人</li>
        </ul>
        <router-link class="mine-design" to='/set' tag="span">设置</router-link>
      </div>
    </div>
    <div class="mine-fans">
      <p>
        <span>10</span><span>关注</span>
      </p>
      <p>
        <span>9999</span><span>粉丝</span>
      </p>
    </div>
    <div class="mine-bottom">
      <ul>
        <li><span></span><router-link to='/vipcenter' tag="span">会员中心</router-link></li>
        <li>
          <p><span></span><router-link to='/photo' tag="span">制作相册</router-link></p>
          <p><span></span><router-link to='/collect' tag="span">我的收藏</router-link></p>
          </li>
        <li>
          <p><span></span><router-link to='/cart' tag="span">购物车</router-link></p>
          <p><span></span><router-link to='/order' tag="span">我的订单</router-link></p>
          <p><span></span><router-link to='/coupon' tag="span">优惠券</router-link></p>
        </li>
      </ul>
    </div>
  </div>
</transition>
</template>

<script>
export default {

}
</script>

<style lang="scss">
@import '@/lib/reset.scss';
.box{
    overflow-y: scroll;
    .mine-person{
      position:relative;
      width: 3.75rem;
      height:2.21rem;
      .mine-son1{
        background:rgb(248, 206, 206);
        width: 4.42rem;
        height:4.42rem;
        position:absolute;
        top:-2.28rem;
        right:-0.35rem;
        border-radius:2.21rem;
        z-index:-2;
      }
      .mine-son2{
          ul{
          width:1.43rem;
          height:1.8rem;
          background:0;
          margin:0.06rem auto;
          li{
            display:block;
            text-align:center;
            width:1.43rem;
            font-weight:500;
            &:nth-child(1){
              height:0.43rem;
              line-height:0.43rem;
              font-size:0.16rem;
              color: rgb(107, 68, 68);
            };
            &:nth-child(2){
              height:0.9rem;
              width:0.9rem;
              margin-top:0.05rem;
              margin-left:0.265rem;
              img{
                width:0.9rem;
                height:0.9rem;
                border-radius:0.45rem;
              }
            };
            &:nth-child(3){
              height:0.2rem;
              line-height:0.25rem;
              font-size:0.14rem;
              color: rgb(94, 60, 60);
            };
            &:nth-child(4){
              height:0.2rem;
              line-height:0.2rem;
              font-size:0.12rem;
              color: rgb(134, 125, 125);

            }
          }
        }
        .mine-design{
          position: absolute;
          right:0rem;
          width:0.68rem;
          height:0.2rem;
          top:0.17rem;
          font-size:0.12rem;
          text-align: center;
          line-height:0.2rem;
        }
      }
      }
    .mine-fans{
      width:3.37rem;
      height:0.9rem;
      background:rgb(248, 206, 206);
      margin:0.05rem auto;
      border-radius:0.05rem;
      p{
        float:left;
        width:0.94rem;
        height:0.61rem;
        background:0;
        margin-top:0.19rem;
        text-align: center;
        span{
          display: block;
          &:nth-child(1){
            height: 0.23rem;
            font-size:0.14rem;
            line-height:0.23rem;
            color: rgb(114, 94, 94);
          };
          &:nth-child(2){
            height: 0.48rem;
            font-size:0.16rem;
            line-height:0.28rem;
            color: rgb(114, 94, 94);
          };
        }
        &:nth-child(1){
          margin-left:0.29rem;
        };
        &:nth-child(2){
          margin-left:0.9rem;
        }
      }
    }
    .mine-bottom{
      width:3.37rem;
      height:2.71rem;
      background:0;
      margin:0.2rem auto;
      ul{
          li{
          box-sizing: border-box;
          display:block;
          font-size:0.14rem;
          width:3.37rem;
          background:0;
          border-bottom:1px solid #ccc;
          &:nth-child(1){
            height:0.45rem;
            line-height:0.45rem;
            span{
              float:left;
              &:nth-child(1){
                width:0.14rem;
                height:0.14rem;
                border-radius:0.95rem;
                border:1px solid #ccc;
                background:#fff;
                margin-top:0.12rem;
                margin-left:0.03rem;
              };
              &:nth-child(2){
                margin-left:0.07rem;
              }
            }
          }
          &:nth-child(2){
            height:0.9rem;
            p{
              height:0.45rem;
              line-height: 0.45rem;
              span{
                float:left;
                &:nth-child(1){
                  width:0.14rem;
                  height:0.14rem;
                  border-radius:0.95rem;
                  border:1px solid #ccc;
                  background:#fff;
                  margin-top:0.12rem;
                  margin-left:0.03rem;
              };
                &:nth-child(2){
                  margin-left:0.07rem;
              }
            }
            }
          }
          &:nth-child(3){
            height:1.35rem;
            p{
              height:0.45rem;
              line-height: 0.45rem;
              span{
                float:left;
                &:nth-child(1){
                  width:0.14rem;
                  height:0.14rem;
                  border-radius:0.95rem;
                  border:1px solid #ccc;
                  background:#fff;
                  margin-top:0.12rem;
                  margin-left:0.03rem;
              };
                &:nth-child(2){
                  margin-left:0.07rem;
              }
            }
            }
          }
        }
      }
    }
}

</style>
